<template>
	<view class="content">
	<!-- 	<view class="update-message">
			<view class="update-text">所在地区：</view>
			<view class="update-input">
				<input @tap="openAddres" v-model="address"/>
			</view>
			<image src="../../static/yjt.png" class="jt"></image>
		</view> -->
		
		<view class="login-content">
			<view class="login-content-top">
				<view class="login-content-top1">收货人</view>
				<view class="login-content-top2">
					<input type="text" value="" placeholder="请输入收货人姓名" v-model="shouhuo"/>
				</view>
			</view>
			<view class="login-content-bottom">
				<view class="login-content-bottom1">手机号码</view>
				<view class="login-content-bottom2">
					 <input type="number" value="" placeholder="请输入收货人手机号" v-model="shouji" />
				</view>
			</view>
			<view class="login-content-bottom">
				<view class="login-content-bottom1">所在地区：</view>
				<view class="update-input">
					<!-- <input placeholder="请选择收货详细地址"  @tap="openAddres" v-model="address" /> -->
					 <input type="text" @tap="openAddres" v-model="address" :focus="firstFocus"/>
					 <image src="../../static/yjt.png" class="jt"></image>
				</view>
				
			</view>
			<view class="login-content-bottom">
				<view class="login-content-bottom1">详情地址</view>
				<view class="login-content-bottom2">
					<!-- <input value="" placeholder=""/> -->
					 <textarea class="detail" placeholder-style="color:#ccc;" placeholder="详细地址:如道路,门牌号" v-model="xxdz"/>
					 <!-- <text>{{pickerText}}</text> --><!-- 这个步骤只是为了让大家看到返回的数据 -->
					 <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address>
				</view>
			</view>
			<!-- 11111 -->
			<!-- <textarea class="detail" placeholder-style="color:#ccc;" placeholder="详细地址:如道路,门牌号"/>
					<text>{{pickerText}}</text><!-- 这个步骤只是为了让大家看到返回的数据 -->
					<!-- <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address> -->
			<!-- 11111 -->
			<view class="login-content-bottom">
				
				        <view class="uni-padding-wrap uni-common-mt">
				            <view class="uni-title">设为默认地址</view>
				            <view>
				                <switch checked @change="switch1Change" color="#Fcda22" style="transform:scale(0.7)"/>
				            </view>
							</view>
			</view>
			<!-- <button type="default" @click="chooseAddr">选择地址</button> -->
			<!-- <n-address ref="addr" @up-data="upData" :fValue="fValue" :fStyles="fStyles"></n-address> -->
			<view class="di-btn" @click="goNewaddress">
				<view class="di-btn2">
					提交
				</view>
			</view>
			</view>
	</view>
</template>

<script>
	import simpleAddress from "@/components/simple-address/simple-address.nvue"
	export default {
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1],//弹框的初始值
				pickerText:'',
				address:'北京市-市辖区-西城区',//初始值
				shouhuo: '',// 收货人
				shouji: '', // 手机号
				xxdz: '',// 详细地址
				firstFocus: false
			}
		},
		components: {
			simpleAddress
		},
		
		methods: {
			
			firstChange() {
				this.secondFocus = false; // 每次都要初始化 focus 属性
				// setTimeout(() => {
				// 	this.secondFocus = true; // this.secondFocus 是第二个文本框的 focus 属性。
				// }，0)
				 setTimeout(function(){
					 this.secondFocus = true; // this.secondFocus 是第二个文本框的 focus 属性。
				        uni.hideKeyboard();//隐藏软键盘
				        // plus.key.hideSoftKeybord();
				    },250);
			},
			 switch1Change: function (e) {
			            console.log('switch1 发生 change 事件，携带值为', e.target.value)
			        },
			goNewaddress() {
				uni.navigateTo({
					url: './address'
				})
			},
			openAddres() {
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				this.pickerText = JSON.stringify(e);//这个步骤只是为了让大家看到返回的数据
				this.address=e.label;//把选择的地址回显到input框中
				// console.log(e.label)
				// console.log(JSON.stringify(e))
			},
			bindTextAreaBlur: function (e) {
			    console.log(e.detail.value)
			}

		}
	}
</script>

<style lang="scss">
	page{background-color: #f1f1f1;}
	/* 提示 */
	.mind{color: #ccc;font-size: 24upx;margin:3%;}
	text{margin:1%;}
	/* 所在地区 */
	.update-message{background-color: #fff;height:95upx;line-height: 95upx;font-size: 32upx;display: flex;border-bottom:2upx solid #e4e4e4;}
	/* 文字 */
	.update-text{flex: 3;text-align: center;}
	/* 右侧input框 */
	.update-input{
		flex: 7;
		display: flex;
		padding: 3.5%;
		input {
			color: #5f5f5f;
			// font-size: 25rpx;
			font-weight: 600;
		}
		}
	/* 箭头 */
	.jt{height:30upx;width:30upx;margin: auto;margin-right: 20upx;}
	/* 详情 */
	.detail{
		background-color: #fff;
		color: #000000;
		width: 400rpx;
		height: 200rpx;
		padding: 2%;
		font-size: 21rpx;
		}
	.content {
		background-color: #ffffff;
	}
	.login-content {
			margin: 0 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			background-color: #FFFFFF;
			.login-content-top, .login-content-bottom {
				margin: 10rpx 0 0 0;
				border-bottom: 1rpx solid #f5f5f5;
				display: flex;
				flex-direction: row;
				justify-content: left;
				.login-content-top1, .login-content-bottom1 {
					font-size: 25rpx;
					margin: 28rpx 68rpx 28rpx 21rpx;
				}
				.login-content-top2 {
					margin: 28rpx 0 28rpx 21rpx;
					font-size: 25rpx;
					input {
						font-size: 25rpx;
						font-weight: 600;
					}
				}
				.login-content-bottom2 {
					margin: 28rpx 0 28rpx 21rpx;
					color: #000000;
					font-size: 25rpx;
					input {
						
						color: #000000;
						font-size: 25rpx;
						font-weight: 600;
					}
					
					.yzm {
						width: 190rpx;
						font-size: 21rpx;
						position: absolute;
						top: 625rpx;
						right: 25rpx;
						z-index: 999;
					}
				}
			}
			.login-yh {
				font-size: 21rpx;
				margin-left: 50rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				line-height: 54rpx;
				height: 54rpx;
			.radio {
				// background-color: #fe4e51;
			}
			}
			.uni-padding-wrap {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 94rpx;
				width: 750rpx;
				.uni-title {
					font-size: 21rpx;
					margin: 21rpx;
				}
			}
			.di-btn {
				position: fixed;
				bottom: 0;
				width: 750rpx;
				height: 105rpx;
				.di-btn2 {
					margin: 21rpx 12rpx;
					width: 706rpx;
					height: 79rpx;
					border-radius: 39rpx;
					line-height: 79rpx;
					text-align: content;
					font-size: 25rpx;
					font-weight: 600;
					background-color: #fcda22;
					display: flex;
					flex-direction: row;
					justify-content: center;
				}
			}
		}
</style>

